<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<c:set var="path" value="${pageContext.request.contextPath }" />
<%@ taglib tagdir="/WEB-INF/tags" prefix="matrix"%>
<%@ taglib uri="http://matrixcsm.zkingsoft.com" prefix="cms"%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="renderer" content="webkit">
<meta http-equiv="Cache-Control" content="no-siteapp">
<title data-index="3" id="selextTitle">${网页标题 }</title>
<meta name="keywords" content="${网页关键词}">
<meta name="description" content="${网页描述 }" />
<!--[if lt IE 8]>
    <meta http-equiv="refresh" content="0;ie.html" />
    <![endif]-->
<link
	href="${path }/resource/plugin/bootstrap-3.3.5/css/bootstrap.min.css"
	rel="stylesheet" type="text/css">
<link
	href="${path }/resource/plugin/font-awesome/css/font-awesome.min.css"
	rel="stylesheet" type="text/css">
<link href="${path }/resource/css/styleOne/animate.min.css"
	rel="stylesheet" type="text/css" />
<link href="${path }/resource/css/visitor/base.css" rel="stylesheet"
	type="text/css">
<link rel="shortcut icon" href="${浏览器logo }">
<style>
.clr {
	clear: both;
}

.fl {
	float: left
}

.fr {
	float: right;
}

.details h3 {
	margin-top: 40px;
	font-size: 22px;
}

.details .change-page {
	margin-top: 38px;
	border: 1px solid #8b8b8b;
	color: #8b8b8b;
	height: 42px;
	width: 162px;
	line-height: 42px;
	text-align: center;
	border-radius: 20px;
}

.change-page a {
	color: #8b8b8b
}

.yellow-bg {
	padding: 0 2px;
	width: 70px;
	height: 20px;
	line-height: 20px;
	text-align: center;
	display: inline-block;
	color: #ffffff;
	border-radius: 10px;
	background: #c6944e;
	font-size: 12px;
	margin-left: 10px;
}

.dot {
	position: absolute;
	top: 7px;
	left: -15px;
	margin-right: 10px;
	width: 6px;
	height: 6px;
	display: inline-block;
	background: #c6944e;
	border-radius: 50%;
}

.gzh {
	padding-top: 20px;
	overflow: hidden;
	border-bottom: 1px solid #dddddd;
	padding-bottom: 20px;
}

.mt {
	position: relative
}

.gzh a {
	color: #555555;
}

.details img {
	max-width: 100%;
}

.details .pic {
	margin: 40px 0;
}
.details p {
	margin-bottom: 38px;
	line-height: 25px;
	color: #333333;
}

.details .share {
	height: 45px;
	line-height: 45px;
	width: 100%;
	background: #f6f6f6;
	margin-bottom: 50px;
}

.details .share img {
	margin-left: 20px;
}

.arcticle-recommand {
	margin-bottom: 50px;
}

.arcticle-recommand h3 {
	font-weight: bold;
	font-size: 18px;
	margin-bottom: 20px;
}

.arcticle-recommand ul li {
	position: relative;
	color: #555555;
	height: 42px;
	line-height: 42px;
}

.arcticle-recommand ul li .solid {
	position: absolute;
	top: 50%;
	margin-top: -2px;
	width: 6px;
	height: 6px;
	background: #c6944e;
	border-radius: 50%;
	display: inline-block
}

.arcticle-recommand ul li span {
	display: inline-block;
}

.arcticle-recommand ul li .time {
	padding-left: 15px;
	font-size: 16px;
	color: #555555;
}

.arcticle-recommand ul li .head {
	margin-left: 5px;
	border-radius: 10px;
	background: #c6944e;
	color: #ffffff;
	width: 66px;
	height: 22px;
	line-height: 22px;
	text-align: center;
}

.arcticle-recommand ul li .abstract {
	margin-left: 10px;
}

.col-md-6 {
	padding: 0px;
}

.right {
	padding-left: 60px;
}

.right h3 {
	font-size: 18px;
	font-weight: bold;
	margin-bottom: 30px;
}

.right a {
	height: 30px;
	line-height: 30px;
	display: inline-block;
	background: #c18a3c;
	color: #ffffff;
	padding: 0px 10px;
}
.min-height{min-height: 500px;}
.menu-wrap{    position: relative;}
.menu{position: absolute;z-index: 23;padding-top:12px;display:none;}
.business-wrap{position: absolute;left:175px;top:11px;height:432px;}
</style>
</head>
<body class="">
<div id="app">
	<jsp:include page="_top.jsp"></jsp:include>
	<div class="container menu-wrap wrap-box">
		<ul class="menu">
			<cms:ad var="items" code="ywfl"></cms:ad>
			<c:forEach var="item" items="${items }">
				<li @mouseover="selectAd('${item.adUrl }')"><a href="${item.adUrl }" target="blank"><img
						src="${item.adImg }" alt="">${item.adTitle }</a></li>
			</c:forEach>
		</ul>
		<div class="business-wrap">
           <div class="business-list" v-for="item in ads">
               <div class="img-box"><img :src="item.adImg" alt=""></div>
               <div>
                   <h4><a href="">{{item.adTitle}}</a></h4>
                   <div class="business-list-link">
                      {{item.adInfo1}}
                   </div>
                   <div class="btns"><a :href="item.adUrl">在线咨询</a><a target="blank" :href="item.adUrl">查看详情</a></div>
               </div>
           </div>
       </div>
	</div>
		<div class="container">
			<cms:art var="art" id="${param.id }" queryAround="true"></cms:art>
			<div class="row details">
				<div class="col-md-9">
					<h3 class="fl">${art.artTitle }</h3>
					<div class="fr change-page">
						<c:if test="${not empty prev }">
							<a href="${path }/redirect/newsDetails?id=${prev.artId}">上一篇</a>
						</c:if>
						&nbsp;|&nbsp;
						<c:if test="${not empty next }">
							<a href="${path }/redirect/newsDetails?id=${next.artId}">下一篇</a>
						</c:if>

					</div>
					<div class="clr gzh">
						<a href=""><img src="${path }/resource/images/weixin.png" alt="">&nbsp;京谷粒公众号</a>
						<span class="fr mt"><span class="dot"></span><span><fmt:formatDate
									value="${art.artCreatetiem }" pattern="yyyy" /></span> <span
							class="yellow-bg">${art.artTypeName}</span></span>
					</div>
					<div class="min-height">${art.artContent }</div>
					  <div class="row arcticle-recommand" >
					
					<div class="col-md-6">
						<h3>相似文章</h3>
						<ul>
							<li v-for="item in xgwz" v-on:click="toArticle(item.artId)"><span
								class="solid"></span> <span class="time">{{item.artCreatetiem
									| getYear}}</span> <span class="head">{{item.artTypeName}}</span> <span
								class="abstract">{{item.artTitle}}</span></li>
						</ul>
					</div>

					<div class="col-md-6">
						<h3>热门推荐</h3>
						<ul>
							<li v-for="item in rmtj" v-on:click="toArticle(item.artId)"><span
								class="solid"></span> <span class="time">{{item.artCreatetiem
									| getYear}}</span> <span class="head">{{item.artTypeName}}</span> <span
								class="abstract">{{item.artTitle}}</span></li>
						</ul>
					</div>
				</div>
				</div>
				<div class="col-md-3 right">
				<h3>热搜标签</h3>
				<div>
					<cms:ad var="items" code="rsbq"></cms:ad>
					 <c:forEach items="${items }" var="item" >
					  <a href="${item.adUrl }" target="blank">${item.adTitle}</a>
					 </c:forEach>
				</div>
			</div>
			</div>
			
		</div>
	</div>

	<jsp:include page="_foot.jsp"></jsp:include>
</body>
<script type="text/javascript"
	src="${path }/resource/js/plugin/jquery-2.1.4.min.js"></script>
<script type="text/javascript"
	src="${path }/resource/js/systools/AjaxProxy.js"></script>
<script type="text/javascript"
	src="${path }/resource/plugin/bootstrap-3.3.5/js/bootstrap.min.js"></script>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script type="text/javascript"
	src="${path }/resource/js/visitor/index.js"></script>
<script>
	var app = new Vue({
		el : '#app',
		data : {
			offset : 0,
			limit : 3,
			ads:[],
			xgwz : [],
			rmtj : [],
		},
		filters : {
			getYear : function(value) {
				var data = new Date(value);
				return data.getFullYear();
			}
		},
		methods : {
			toArticle : function(id) {
				window.open("${path}/redirect/newsDetails?id=" + id);
			},
			selectAd:function(code){
				$.AjaxProxy({
					c : false,
					p : {
						"code" : code
					}
				}).invoke("${path}/findAd", function(loj) {
					app.ads = loj.getValue("rows");
				});
			},
			loadOtherArt : function() {
				$.AjaxProxy({
					c : false,
					p : {
						"offset" : 0,
						"limit" : 3,
						"artTypeId" : "${art.artTypeId}"
					}
				}).invoke("${path}/findNews", function(loj) {
					app.xgwz = loj.getValue("rows");
				});
				$.AjaxProxy({
					c : false,
					p : {
						"offset" : 0,
						"limit" : 3,
						"code" : "xw"
					}
				}).invoke("${path}/findNews", function(loj) {
					app.rmtj = loj.getValue("rows");
				});
			}
		},
	});
	app.loadOtherArt();

	$(".tab li").click(function() {
		$(this).addClass("active").siblings().removeClass("active")
		$(".tab-content").find("ul").hide();
		$(".tab-content").find("ul").eq($(this).index()).show()
	})
</script>

</body>
</html>
